import React, { PureComponent } from 'react';
import { Form, Radio, Select, Row, Col, Button, message, Table, Popconfirm } from 'antd';
import {
    selectCitySpiderConfig,
    saveCitySpiderConfig
} from '@/services/city';
import MyTable from './city/MyTableCell'
import auth from '@/utils/auth';
import styles from './components.less';

const grabTypeConfig = {
    '0': '社保',
    '1': '公积金'
}
const answerConfig = [
    { name: '否', value: '0' },
    { name: '是', value: '1' },
]
const formItemLayout = {
    labelCol: { span: 9 },
    wrapperCol: { span: 8 },
};
class Reptile extends PureComponent {
    constructor(props) {
        super(props);
        const { cityCode } = props.record;
        this.state = {
            sourcesData: [
                {
                    cityCode: cityCode,
                    grabType: "0",
                    isIdentify: "",
                    isSplit: "",
                    proxytype: "",
                },
                {
                    cityCode: cityCode,
                    grabType: "1",
                    isIdentify: "",
                    isSplit: "",
                    proxytype: "",
                }
            ]
        }
        this.selectCitySpiderConfig({ cityCode: props.record.cityCode });
    }
    // 合并爬虫设置信息
    mergeSpiderConfig(oldData, newData) {
        const getDataByType = (list, type) => {
            let res;
            list.forEach((item) => {
                if (item.grabType === type) {
                    res = item;
                }
            })
            return res;
        };
        return oldData.map((item) => {
            let curData;
            if ((curData = getDataByType(newData, item.grabType))) {
                return { ...item, ...curData }
            }
            return item;
        })
    }
    /**
     * @description 获取城市业务表单信息
     * @author zlh
     * @date 2021-10-25
     * @memberof
     */
    async selectCitySpiderConfig(params) {
        if (auth.isUndef(params.cityCode)) return;
        const dataObj = await selectCitySpiderConfig(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            this.setState(oldState => ({
                ...oldState,
                sourcesData: this.mergeSpiderConfig(oldState.sourcesData, dataObj.data)
            }));
        }
    };
    /**
    * @description 保存城市爬虫抓取服务配置
    * @author zlh
    * @date 2021-11-01
    * @memberof
    */
    async handleSaveConfig(index) {
        const data = this.state.sourcesData[index];
        const dataObj = await saveCitySpiderConfig(data);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            this.setState(oldState => ({
                ...oldState,
                promptData: dataObj.data
            }));
        }
    };
    handleSave = row => {
        const newData = [...this.state.sourcesData].map((data) => {
            if (data.grabType === row.grabType) {
                data = row;
            }
            return data;
        });
        this.setState({ sourcesData: newData });
    };
    render() {
        const { sourcesData } = this.state;
        const { record } = this.props;
        const columns = [
            {
                name: 'grabType',
                title: '官网类别',
                dataIndex: 'grabType',
                render: (text) => (grabTypeConfig[text])
            },
            {
                name: 'isIdentify',
                title: '识别验证码状态',
                dataIndex: 'isIdentify',
                type: 'select',
                editable: true,
                optionData: answerConfig
            },
            {
                name: 'proxytype',
                title: '代理状态',
                type: 'select',
                editable: true,
                dataIndex: 'proxytype',
                width: '24%',
                optionData: [{ name: '不使用', value: '0' }, { name: '阿布云', value: '1' }, { name: 'ANT代理', value: '2' }, { name: '芝麻代理', value: '3' }]
            },
            {
                name: 'isSplit',
                title: '拆分状态',
                dataIndex: 'isSplit',
                type: 'select',
                editable: true,
                optionData: answerConfig
            },
            {
                title: '操作',
                dataIndex: 'operation',
                width: '20%',
                render: (text, record, index) =>
                    <Popconfirm title="确认要保存‘城市抓取配置’信息吗?" onConfirm={() => this.handleSaveConfig(index)}>
                        <button type="primary" style={{ margin: '10px' }} >保存</button>
                    </Popconfirm>
            },
        ];
        const components = {
            body: {
                row: MyTable.EditableFormRow,
                cell: MyTable.EditableCell,
            },
        };
        const tempColumns = columns.map(col => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: record => {
                    return {
                        record,
                        ...col,
                        handleSave: this.handleSave,
                    }
                },
            };
        });
        return <div>
            <Row>
                <Col span={5}>
                    <Form.Item label="城市名称:" {...formItemLayout}>
                        {record.cityName}
                    </Form.Item>
                </Col>
                <Col span={5}>
                    <Form.Item label="城市代码:" {...formItemLayout}>
                        {record.cityCode}
                    </Form.Item>
                </Col>
            </Row>
            <Table
                className={styles['my-edittable']}
                components={components}
                rowClassName={() => 'editable-row'}
                bordered
                size="small"
                rowKey={(item, index) => index}
                dataSource={sourcesData}
                columns={tempColumns}
            />
        </div>

    }
}
export default Reptile;